import React from 'react';
import ReactSwipe from 'react-swipe';
import './style.less';
import ImgHolder from '../../../components/ImgHolder';

const HomeSlider = ({onIndexChange, index, data}) => {
  const CONFIG = {
    auto: 3000,
    speed: 800,
    transitionEnd(index, elem) {
      // 滑动结束时触发
      onIndexChange(index);
    }
  }

  return (
    <div className="home-slider">
      <ReactSwipe className="carousel" swipeOptions={CONFIG}>
        {
          data.map((list, index) => (
            <dl key={index}>
              {
                list.map(item =>
                  <dd key={item.url}>
                    <ImgHolder src={item.url}/>
                    <h1>{item.title}</h1>
                  </dd>
                )
              }
            </dl>
          ))
        }
      </ReactSwipe>
      <ul>
        {
          data.map((item, idx) => (<li key={idx} className={idx === index ? 'active' : ''}></li>))
        }
      </ul>
    </div>
  )
}

export default HomeSlider;
